<template>
	<view>
		<view :style="{ height: statusBarHeight,backgroundColor:statusBarBackColor }" class="status-bar">
			<slot />
		</view>
		<view :style="{ height: statusBarHeight}" class="status-bar-space"></view>
	</view>
</template>


<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		name: 'StatusBar',
		props: {
			statusBarBackColor: {
				type:String,
				default: '#ffffff'
			}
		},
		data() {
			return {
				statusBarHeight: statusBarHeight
			}
		}
	}
</script>

<style scoped>
	.status-bar {
		position: fixed;
		left: 0;
		top:0;
		width: 750rpx;
		z-index: 5;
	}
	.status-bar-space{
		width: 100%;
	}
</style>